<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%; margin-top: -20px;"
      border
      @row-click="rowClick"
      highlight-current-row>
      <el-table-column label="选择" width="100" align="center">
      <template slot-scope="scope">
        <el-radio :label="scope.$index" v-model="radio" @change.native="getCurrentRow(scope.row)">&nbsp;</el-radio>
      </template>
      </el-table-column>
      <el-table-column  prop="userName" label="姓名" width="200" align="center"></el-table-column>
      <el-table-column prop="phone" label="手机号" width="200" align="center"></el-table-column>
      <el-table-column prop="storeName" label="任职门店" show-overflow-tooltip align="center"></el-table-column>
    </el-table>
    <el-pagination
      style="margin-top: 10px;text-align: right;"
      layout="total, sizes, prev, pager, next"
      :current-page="currentPage"
      :page-sizes="pageSizes"
      :page-size="pageSize"
      :total="totalCount"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <div style="text-align: right; margin-top: 10px;">
      <el-button type="success"  @click="selectOnClick">确定</el-button>
    </div>
  </div>
</template>
<script>
import baseMixin from '@/mixins/base'
import { userPage } from '@/api/after-sale/personnel/index'
export default {
  mixins: [
    baseMixin({
      idName: 'id',
      findData: userPage,
      dataName: ['content', 'totalRecords']
    })
  ],
  props: {
    storeId: {
      stype: Number,
      default: 0
    }
  },
  data() {
    return {
      radio: -1,
      // searchOptions: {
      //   storeId: this.storeId
      // },
      pageSizes: [10, 20, 50, 100]
    }
  },
  methods: {
    getCurrentRow(row) {
      this.selection = row
    },
    rowClick(row, column, event) {
      this.selection = row
      this.radio = this.tableData.findIndex(item => item.id == row.id)
    },
    selectOnClick() {
      this.$emit('select-item', this.selection)
    },
    handleSizeChange(pageSize) {
      this.pageSize = pageSize
      this.selection = null
      this.radio = -1
      this.setTableData()
    },
    handleCurrentChange(currentPage) {
      this.selection = null
      this.radio = -1
      this.currentPage = currentPage
      this.setTableData()
    }
  }
}
</script>
